<!--替身/其他任务-->
<template>
    <div id="partTimeConfim">
    <div class="model" @click="TurnOC" v-show="turnOpenClose"></div>
     <div class="showPartRig" v-show="showPartRig">
        <div class="navLeft">
         <section class="navLeftTurn" @click="TurnOC"><img style="width:3rem;height:4rem;" src="../../../assets/task/rubbit.png" alt=""><button><span>{{word}}</span></button></section> 
           <div>
                <el-checkbox-group v-model="navChData">
                    <el-checkbox-button v-for="item in showData.receiveOrders" :label="item.id" :key="item.id">
                    <p style="position:absolute;top:0;right:0"><img style="width:1.2rem;height:1.2rem;" src="../../../assets/me/olreturn.png" alt=""><br><span style="font-size:12px;color:red;">退单</span></p>
                    <img style="width:3rem;height:3rem;border-radius:50%;margin-top:0.5rem;margin-bottom:0.2rem;" :src="item.userModel.headPortrait" alt=""><p>{{item.common1}}<img v-if="item.userModel.sex==1" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/male.png" alt=""><img v-if="item.userModel.sex==2" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/women.png" alt=""></p>
                    </el-checkbox-button>
                </el-checkbox-group>
           </div>
            <button class="navConfirm" @click="navConfirm">全部确定</button>
    </div>
     </div>
      <!--后退-->
      <img style="position:fixed;height:0.8rem;width:0.5rem;top:1.25rem;left:1.25rem;z-index:2;"src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)"> 
      <div class="oltrocityTHeader">
          <el-steps align-center :active="active" finish-status="success">
                <el-step title="已接单"></el-step>
                <el-step title="接单方确认"></el-step>
                <el-step title="发布方确认"></el-step>
          </el-steps>
            <img @click="callphone" style="position:absolute;right:5.5rem;top:7.25rem;width:3.4rem;height:4rem;" src="../../../assets/me/olCall.png" alt="">
            <img @click="sendMsg" style="position:absolute;right:1.5rem;top:9rem;width:3.4rem;height:4rem;" src="../../../assets/me/olSetMessage.png" alt="">
          <div class="olATb">
              <!--头像 名称 星星评论 接单 退单-->
              <div class="olATbFirst" style="height:100%;width:100%;">
                   <img style="height:3rem;width:3rem;border-radius:50%;margin:4rem 0px 0px 3rem;" :src="showData.taskModel.userModel.headPortrait" alt=""></p>
                   <section style="display:flex;margin:0.25rem 0px 0px 2.5rem;">
                       <div class="me" style="width:5rem;height:2.5rem;font-size:0.5rem;">
                          <section style="display:flex;color:#000000;font-weight:700;font-size:0.5rem;">
                              <p>{{showData.taskModel.userModel.nickName}}</p><img v-if="showData.taskModel.userModel.sex==1" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/male.png" alt=""><img v-if="showData.taskModel.userModel.sex==2" style="height:0.75rem;width:0.75rem;margin-left:0.25rem;" src="../../../assets/me/women.png" alt="">
                          </section>
                          <section  class="stars">
                                 <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                                 <img v-for="item in untotal" style="width:11px;height:11px;" src="../../../assets/tabber/unstarHav.png" alt="">
                          </section>
                       </div>
                       <div class="getAndReturn" style="position:absolute;left:9rem;z-index:1111111;width:6rem;height:2rem;display:flex;padding-top:0.4rem;">
                            <section style="width:50%;line-height:1;text-align:center;">
                                  <img style="height:0.9rem;width:0.8rem;"src="../../../assets/me/olget.png" alt="">
                                  <br><span style="font-size:0.6rem;color:#34a498;">催单</span>
                            </section>
                            <section style="width:50%;line-height:1;text-align:center;border-left:1px solid #e2e2e2;">
                                  <img style="height:0.9rem;width:1rem;"src="../../../assets/me/olreturn.png" alt="">
                                  <br><button style="font-size:0.6rem;color:#d72109;"@click="chargeback">退单</button>
                            </section>
                       </div>
                   </section>
                   <section style="display:flex;margin:1rem 0px 0px 0.75rem;width:88%;justify-content:space-between;">
                        <p style="font-size:1rem;color:#34a498;">{{showData.amount}} ￥</p>
                        <p style="font-size:0.7rem;color:#888888;margin-top:0.25rem;">{{turnTime(showData.orderTime)}} 发布</p>
                   </section>
                  <section style="margin:0.25rem 1.5rem 0px 1.5rem;width:80%;">
                     <p style="font-size:0.65rem;height:4rem;color:#000000;width:100%;border-bottom:1px solid #e2e2e2;">{{showData.taskExplain}}</p>
                     <section style="font-size:0.65rem;height:5rem;line-height:1.25rem;color:#000000;width:100%;">
                          <p>工作地点:&nbsp;{{showData.taskLocation}}</p>
                          <p>工作时间:&nbsp;{{showData.taskModel.beginTime}}&nbsp;~&nbsp; {{showData.taskModel.endTime}}</p>
                          <p  v-if="showData.taskModel.allSum">不限&nbsp;&nbsp;{{showData.taskModel.allSum}}/{{showData.taskModel.allSum}}&nbsp;&nbsp;人/天&nbsp;</p>
                          <p style="display:flex;">
                              <span v-if="showData.taskModel.manSum" style="width:50%;display:inline-block;">男生&nbsp;&nbsp;{{showData.taskModel.manSum}}/<span v-if="showData.taskModel.manSum">{{Number(showData.taskModel.manSum)+Number(showData.taskModel.womanSum)}}</span><span v-if="!showData.taskModel.womanSum">{{showData.taskModel.manSum}}</span>&nbsp;&nbsp;人/天&nbsp;</span>
                              <span v-if="showData.taskModel.womanSum" style="width:50%;display:inline-block;">女生&nbsp;&nbsp;{{showData.taskModel.womanSum}}/<span v-if="showData.taskModel.manSum">{{Number(showData.taskModel.manSum)+Number(showData.taskModel.womanSum)}}</span><span v-if="!showData.taskModel.manSum">{{showData.taskModel.womanSum}}</span>&nbsp;&nbsp;人/天&nbsp;</span>
                          </p>
                     </section>
                  </section>
              </div>
          </div>
      </div>
      <button class="olBtn" @click="confirmOrder">确认订单</button>
    </div>
</template>
<script>
import StarRate from 'vue-cute-rate'
import turnTime from '../../../server/dataTime.js'
 export default {
     components: {
    StarRate
  },
     data(){
         return {
             showPartRig:false,
             total:undefined,
             untotal:undefined,
             word:'展开',
             navChData:[],
             turnOpenClose:false,
             turnTime:turnTime,
             showData:{
                 taskModel:{
                     userModel:{
                         nickName:undefined,
                     }
                 }
             },
             active:0
         }
     },
     created(){
         this.getDetailData()
     },
     methods:{
         getDetailData(){
            this.$api.getorderCommBI(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.showData = res.data
                    if(this.showData.bigType==1){
                        this.showPartRig = true;
                    }
                    if(this.showData.bigType==2){
                        this.showPartRig = false;
                    }
                    console.log('gfdfdsfdss')
                     console.log(this.showData)
                    this.total = this.showData.taskModel.userModel.totalStar;
                    this.untotal = 5-Number(this.total)
                }
            })
        },
         navConfirm(){
             this.$api.partTimeJobConfirm(this.navChData).then((res)=>{
                 if(res.code=='000000'){
                 }
             })
         },
         TurnOC(){
             if(this.turnOpenClose==false){
                 $(".navLeft").animate({right:'0'});
                 this.turnOpenClose = true;
                 this.word = '收起'
             }
              else{
                   $(".navLeft").animate({right:'-17rem'});
                   this.turnOpenClose = false;
                   this.word = '展开'
              }  
         },
          chargeback(){
              console.log('dddddddddddddd')
              console.log(this.showData)
            this.$api.chargeback(this.showData.id).then((res)=>{
                if(res.code=='000000'){
                   //
                }
            })
          },
        //  根据id获取详情
        
        // 确认订单
        confirmOrder(){
             this.$api.confirmOrder(this.$route.params.id).then((res)=>{
                if(res.code=='000000'){
                    this.$router.push({
                        path: '/Evaluation/'+this.showData.id,
                    })
                }
            })
        },
        callphone(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        },
        sendMsg(){
            window.location.href = "tel:"+this.showData.taskModel.userModel.phoneNumber;
        }
     }
 }
</script>
<style lang="">
#partTimeConfim .showPartRig{
   position:absolute;
   right:0;
   top:0;
   height:100%;
   background-color:transparent;
   width:100%;
   overflow:hidden;
}
#partTimeConfim .navConfirm{
    width:8rem;
    height:3rem;
    background-color:#34a498;
    border-radius:5px;
    color:white;
    position:absolute;
    bottom:3rem;
    left:30%;
}
#partTimeConfim .el-checkbox-button, .el-checkbox-button__inner{
    width:6rem;
    height:6rem;
}
#partTimeConfim .el-checkbox-group{
    display:flex;
    flex-wrap: wrap;
}
#partTimeConfim .navLeft label{
 width:6rem!important;
}
#partTimeConfim .el-checkbox-button__inner:hover{
    color:#b29283
}
#partTimeConfim .el-checkbox-group label{
    margin-left:2rem;
    margin-top:1rem;
   
}
#partTimeConfim .el-checkbox-button__inner{
    border:1px solid #b29283;
}
#partTimeConfim .el-checkbox-button.is-checked .el-checkbox-button__inner {
    width:100%;
    height:100%;
    color: #fff;
    background-color: #34a498;
    border-color: #b29283;
}
#partTimeConfim{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olBackground.png);
}
#partTimeConfim .model{
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.4);
    position:absolute;
    top:0;
    left:0;
    z-index:11111;
}
#partTimeConfim .navLeftTurn{
    width:2rem;
    height:2rem;
    position:relative;
    left:-2rem;
    top:30%;
}
#partTimeConfim .navLeftTurn button{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:1;
    margin-top:2.5rem;
    height:6rem;
    background-color:#b29283;
   
}
#partTimeConfim .navLeftTurn button span{
     display:block;
     width:14px;
     line-height:50px;
     height:100px;
     margin-left:5px;
     color:white;
}
#partTimeConfim .navLeft{
    position:absolute;
    top:0;
    right:-17rem;
    width:17rem;
    height:100%;
    background-color:white;
    border:1px solid #b29283;
    border-right:none;
    border-radius:5px;
    z-index:111111111;
}

#partTimeConfim .el-steps{
    padding-top:0.8rem;
}
#partTimeConfim .el-step__icon.is-text {
    border-radius: 50%;
    border: 0px solid;
    border-color: inherit;
}
#partTimeConfim .el-step__icon {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 0px;
}
#partTimeConfim .el-step.is-horizontal .el-step__line {
    top: 0.75rem;
}
#partTimeConfim .el-step__title.is-process {
    font-weight: 500;
    color: #303133;
}
#partTimeConfim .el-step__title {
    font-size: 0.6rem;
    line-height: 1.25rem;
}
#partTimeConfim .olATb{
    height:24rem;
    margin:2.5rem 0.5rem;
    background-size:100% 100%;
    background-image:url(../../../assets/me/olRubbitBackground.png);
}
#partTimeConfim .stars > img{
    height:0.75rem;
    width:0.75rem;
}
#partTimeConfim .olBtn{
    position:absolute;
    z-index:111111;
    left:25%;
    bottom:1%;
  height:2rem;
  width:50%;
  text-align:center;
  line-height:2rem;
  font-size:0.8rem;
  color:#FFF;
  border-radius:13px;
  background:#29a193;
}
</style>
